<template>
  <div class="addVisit">
    <!-- 新增走访页面 -->
    <div class="cust_tit">
      <img :src="img1" alt="" @click="fanhui" />
      <span>新增拜访信息</span>
      <img :src="img2" alt="" />
    </div>
    <ul>
      <li>
        <span>客户名称</span>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <p>{{ nameVal }}</p>
        </van-pull-refresh>
      </li>
      <li>
        <span>拜访标题</span>
        <input type="text" v-model="baifangTit" />
      </li>
      <li>
        <span>拜访原因</span>
        <div>
          <van-field
            readonly
            clickable
            :value="value"
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" round position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @cancel="showPicker = false"
              @confirm="onConfirm"
            />
          </van-popup>
        </div>
      </li>
      <li>
        <span>拜访时间</span>
        <input type="text" v-model="bfTime" />
        <div>
          <!-- <van-cell @click="showPopup" ></van-cell>
          <van-popup v-model="show" position="bottom">
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
              @cancel="show = false"
              @confirm="confirmtwo"
            />
          </van-popup> -->
        </div>
      </li>
      <li>
        <span>拜访地址</span>
        <textarea name="" id="" placeholder="请输入" v-model="bfdes"></textarea>
      </li>
      <li>
        <span>拜访情况</span>
        <textarea
          name=""
          id=""
          placeholder="请输入"
          v-model="bfqingkuang"
        ></textarea>
      </li>
      <li>
        <span>竞争信息</span>
        <textarea
          name=""
          id=""
          placeholder="请输入"
          v-model="jingzheng"
        ></textarea>
      </li>
    </ul>
    <van-button round color="#003399" size="large" @click="addVal"
      >保存</van-button
    >
    <!-- 引入的客户列表 -->
    <router-view></router-view>
  </div>
</template>

<script>
import { AddVisit } from "@/request/api";
export default {
  props: ["placeholder"],
  data() {
    return {
      img1: require("@/assets/返回.png"),
      img2: require("@/assets/首页按钮.png"),

      //   下拉刷新的数据
      isLoading: false,
      nameVal: "请下拉刷新",

      //   拜访原因弹出层的数据
      value: "",
      showPicker: false,
      columns: ["例行走访", "售中支撑", "售前支撑", "售后支撑"],

      //   拜访时间选择的数据
      show: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: "",
      timeVal: "",

      //   请求参数
      //   列表收集数据
      baifangTit: "",
      bfyuanyin: "",
      bfTime: "",
      bfdes: "",
      bfqingkuang: "",
      jingzheng: "",
    };
  },
  created() {
    this.nameVal = this.$route.query.name;
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    // 下拉刷新的方法
    onRefresh() {
      setTimeout(() => {
        // Toast("刷新成功");
        this.isLoading = false;
        this.$router.push("/visit/visitadd/visitaddlist");
      }, 1000);
    },
    // 拜访原因弹出层的方法
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
      //   console.log(this.value);
    },
    // // 时间
    // showPopup() {
    //   this.show = true;
    // },
    // confirmtwo() {
    //   this.show = false;
    //   this.timeVal = this.currentDate;
    //   console.log(this.timeVal);
    // },
    // 点击保存按钮
    addVal() {
      //   console.log(this.$route.query.id);
      //   console.log(this.$route.query.name);
      //   console.log(this.bfTime);
      //   console.log(this.bfdes);
      //   console.log(this.baifangTit);
      //   console.log(this.value);
      //   console.log(this.bfqingkuang);
      //   console.log(this.jingzheng);
      // 此处应该注意输入时间的格式要与接口文档里面一致
      AddVisit({
        custId: this.$route.query.id,
        custName: this.$route.query.name,
        visitTime: this.bfTime,
        visitAddress: this.bfdes,
        visitTitle: this.baifangTit,
        visitReason: this.value,
        visitSituation: this.bfqingkuang,
        collectSituation: this.jingzheng,
      }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.addVisit {
  min-height: 100%;
  width: 100%;
  background-color: #efefef;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;
  .cust_tit {
    padding: 0.3rem 0.2rem 0.1rem;
    background-color: #003399;
    color: white;
    font-size: 0.18rem;
    display: flex;
    justify-content: space-between;
    img {
      width: 0.2rem;
      height: 0.2rem;
    }
  }
  ul {
    margin-top: 0.1rem;
    li {
      background-color: white;
      height: 0.45rem;
      display: flex;
      line-height: 0.45rem;
      padding: 0 0.15rem;
      border-bottom: 1px solid #ccc;
      &:nth-child(2) {
        margin-top: 0.1rem;
      }
      &:nth-child(5),
      &:nth-child(6),
      &:nth-child(7) {
        margin-top: 0.1rem;
        height: 1rem;
        textarea {
          width: 75%;
          border: none;
        }
      }
      span {
        margin-right: 0.15rem;
      }
      input {
        border: 0;
      }
    }
  }
  .van-button {
    position: fixed;
    bottom: 0;
  }
}
</style>